<script setup lang="ts">

import { ref, onMounted } from 'vue'
import { 
  Grid, Setting, QuestionFilled, Expand, Fold, Minus, 
  Close, CopyDocument 
} from '@element-plus/icons-vue'
import { getCurrentWindow } from '@tauri-apps/api/window'
import CustomMenu from '@/components/CustomMenu/index.vue'
import { useAppMenu } from '@/composables/useAppMenu'

// 应用菜单系统
const { menuState, isMenuReady } = useAppMenu()

// 响应式数据
const sidebarCollapsed = ref(false)
const version = ref('1.0.0')

// 状态数据
const deviceStatus = ref({
  online: 0,
  total: 0
})

const accountStatus = ref({
  active: 0,
  total: 0
})

const taskStatus = ref({
  running: 0
})

// 路由相关
// const route = useRoute()
// const currentRoute = computed(() => route.path)

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const openSettings = () => {
  // 打开设置对话框
  console.log('Open settings')
}

const openHelp = () => {
  // 打开帮助文档
  console.log('Open help')
}

// 窗口控制函数
const minimizeWindow = async() => {
  await getCurrentWindow().minimize()
}

const maximizeWindow = async() => {
  await getCurrentWindow().toggleMaximize()
}

const closeWindow = async() => {
  await getCurrentWindow().close()
}

// 加载状态数据
const loadStatusData = async() => {
  // TODO: 从后端获取状态数据
  try {
    // 模拟数据
    deviceStatus.value = { online: 2, total: 5 }
    accountStatus.value = { active: 8, total: 12 }
    taskStatus.value = { running: 3 }
  } catch (error) {
    console.error('Failed to load status data:', error)
  }
}

// 生命周期
onMounted(() => {
  loadStatusData()
  
  // 定时更新状态数据
  setInterval(loadStatusData, 10000) // 每10秒更新一次
})
</script>

<template>
  <div id="app" class="app-container">
    <!-- 自定义标题栏 -->
    <header class="app-header" data-tauri-drag-region>
      <div class="header-left" data-tauri-drag-region>
        <el-icon class="app-logo">
          <Grid />
        </el-icon>
        <span class="app-title">SocialMatrix Pro</span>
      </div>
      
      <div class="header-center" data-tauri-drag-region>
        <!-- 可以添加搜索框或其他中心内容 -->
      </div>
      
      <div class="header-right">
        <el-tooltip content="设置" placement="bottom">
          <el-button text @click="openSettings">
            <el-icon><Setting /></el-icon>
          </el-button>
        </el-tooltip>
        
        <el-tooltip content="帮助" placement="bottom">
          <el-button text @click="openHelp">
            <el-icon><QuestionFilled /></el-icon>
          </el-button>
        </el-tooltip>

        <!-- 窗口控制按钮 -->
        <div class="window-controls" data-tauri-drag-region="false">
          <el-tooltip content="最小化" placement="bottom">
            <el-button text class="window-btn minimize" @click="minimizeWindow">
              <el-icon><Minus /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="最大化" placement="bottom">
            <el-button text class="window-btn maximize" @click="maximizeWindow">
              <el-icon><CopyDocument /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="关闭" placement="bottom">
            <el-button text class="window-btn close" @click="closeWindow">
              <el-icon><Close /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="app-main">
      <!-- 侧边栏 -->
      <aside class="app-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <CustomMenu :collapsed="sidebarCollapsed" />
        
        <!-- 侧边栏折叠按钮 -->
        <div class="sidebar-toggle">
          <el-button 
            text 
            @click="toggleSidebar"
            :icon="sidebarCollapsed ? Expand : Fold"
          />
        </div>
      </aside>

      <!-- 内容区域 -->
      <div class="app-content">
        <router-view v-slot="{ Component, route }">
          <transition name="fade-slide" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
      </div>
    </main>

    <!-- 状态栏 -->
    <footer class="app-footer">
      <div class="footer-left">
        <span class="status-text">
          设备: {{ deviceStatus.online }}/{{ deviceStatus.total }}
          | 账号: {{ accountStatus.active }}/{{ accountStatus.total }}
          | 任务: {{ taskStatus.running }}
        </span>
        
        <!-- 菜单状态指示器 -->
        <div class="menu-status" v-if="isMenuReady">
          <el-tag 
            v-if="menuState.hasUnsavedChanges" 
            type="warning" 
            size="small" 
            effect="plain"
          >
            未保存
          </el-tag>
          
          <el-tag 
            v-if="menuState.autoSave" 
            type="success" 
            size="small" 
            effect="plain"
          >
            自动保存
          </el-tag>
          
          <el-tag 
            v-if="menuState.darkMode" 
            type="info" 
            size="small" 
            effect="plain"
          >
            深色模式
          </el-tag>
          
          <el-tag 
            v-if="menuState.notifications" 
            type="primary" 
            size="small" 
            effect="plain"
          >
            通知
          </el-tag>
        </div>
      </div>
      
      <div class="footer-right">
        <span class="view-mode-text">{{ menuState.viewMode }} 视图</span>
        <span class="version-text">v{{ version }}</span>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.app-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  user-select: none;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .app-logo {
      font-size: 24px;
      color: var(--el-color-primary);
    }

    .app-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .window-controls {
      display: flex;
      margin-left: 12px;
      
      .window-btn {
        width: 46px;
        height: 32px;
        border-radius: 0;
        transition: all 0.2s ease;
        
        &.minimize:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        
        &.maximize:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        
        &.close:hover {
          background: #e81123;
          color: white;
        }
        
        .el-icon {
          font-size: 16px;
        }
      }
    }
  }
}

.app-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.app-sidebar {
  width: 260px;
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;

  &.collapsed {
    width: 64px;
  }


  .sidebar-toggle {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--el-border-color);
  }
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-footer {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color);
  font-size: 12px;

  .footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .status-text {
      color: var(--el-text-color-regular);
    }
    
    .menu-status {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .el-tag {
        height: 20px;
        line-height: 18px;
        font-size: 11px;
      }
    }
  }
  
  .footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .view-mode-text {
      color: var(--el-text-color-regular);
      font-weight: 500;
    }

    .version-text {
      color: var(--el-text-color-placeholder);
    }
  }
}

// 页面切换动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
</style>